<template>
    <div class="float_mask" id="float_mask"> 
		<div class="float_layer"> 
		</div> 
		<div class="float_content clearfix" v-if="user.adAndRecommend&&user.adAndRecommend.bottomad"> 
            <div class="float_bg"> 
            <a :href="user.adAndRecommend.bottomad.url" target="_blank">
                <div class="float_slogan" :style="'background-image:url('+user.adAndRecommend.bottomad.image+')'"></div> </a> 
            </div> 
            <div class="float_close"> 
                <a @click="closeFootAd" href="javascript:;" title="我知道了"></a> 
            </div> 
		</div> 
	</div> 
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:'ad',
    methods: {
        closeFootAd() { //关闭底部广告 
            document.getElementById("float_mask").style.display="none"; 
            this.setCookie("footad","0"); 
        },
        setCookie(name,value){ //设置cookie 
            var exp = new Date(); 
            exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小时 
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
        },
        getCookie(name){ //取cookies函数 
            var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
            if(arr != null) return unescape(arr[2]); return null; 
        }  

    },
    mounted(){
        if(this.getCookie("footad")==0){ 
            document.getElementById("float_mask").style.display="none"; 
        }else{ 
            document.getElementById("float_mask").style.display="block"; 
        };
        
    },
    computed:{
        ...mapState({
            user: state => state.AuthUser
        })
    },
}
</script>

<style>
.float_mask{
position: fixed;
z-index: 19999;
display:none;
width: 100%;
right: 0; 
bottom: 0;
height: 105px;
_bottom: auto;
_width: 100%;
_position: absolute; 
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} 
.float_layer{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* background: #071828; */
    filter: alpha(opacity=80);
    opacity: 0.80;
    } 
.float_content{ position: relative;z-index: 2;width: 100%;height: 108px;margin: 0 auto;} 
.float_bg, .float_close{ float: left;} 
.float_bg{position: relative;width: 100%;height: 108px;} 
/* .float_slogan {position: absolute; background: url(./img/footImg.jpg) 0 0 no-repeat;background-size: 100%;}  */
.float_slogan {
    position: absolute;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    min-width: 1260px;
} 
.float_slogan{left: 0;bottom: 0;width: 100%;height: 108px;cursor: pointer;} 
.float_close{width: 60px;margin-top: 30px;} 
.float_close a {
    display: block;
    width: 53px; 
    height: 52px; 
    margin-left: 7px; 
    background: url(./img/close.png) 0 0 no-repeat;
    -webkit-transition: all 400ms;
    position:absolute;
    top: -53px;
    right:225px;
    } 
</style>